<template>
  <view class="form-container">
    <view class="uni_forms">
      <template v-for="(formItem, formIndex) in formFileld">
        <view class="uni_forms_item" :key="formIndex">
          <view class="uni_forms_item_label" :style="{width: formItem.width || '120rpx'}">
            <text v-if="formItem.required" class="required">*</text>
            <text class="empty" v-else></text>
            <text
              class="uni_forms_item_label_title">{{formItem.label || formItem.key}}</text>
          </view>
          <view class="uni_forms_item_container">
            <slot :name="formItem.key"></slot>
          </view>
        </view>
      </template>
      <view class="submit_btn" :style="{color:textColor, background:  bgColor}"
        @tap="submit">
        {{ submitText }}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "FormModal",
    props: {
      /*  @1、
       *   label: '名字', --- > 必选项
       *   key: 'name', --- > 必选项
       *   required: true,  --- > 可选项 
       *   value: ''  --- > 可选项  默认值 undefined / '' / 不写
       *  @2、
       *   必须使用  .sync 修饰符
       */
      formFileld: Object | Array,
      submitText: {
        type: String,
        default: '提交'
      },
      textColor: {
        type: String,
        default: '#fff'
      },
      bgColor: {
        type: String,
        default: '#007aff'
      },
      model: {
        type: Object,
        default: () => {},
        required: true
      }
    },
    watch: {
      model: {
        handler() {
          Object.entries( this.model ).forEach( ( [ k, v ] ) => {
            this.formFileld.forEach( item => {
              if ( item.required && item.key === k ) item.value = v
            } )
          } )
        },
        deep: true
      }
    },
    methods: {
      submit() {
        try {
          const requires = this.formFileld.map( v => {
            if ( v.required ) return v.label
          } ).filter( x => x )
          let isView = this.formFileld.some( v => v.required && !v.value )
          if ( isView ) return uni.$showMsg( ( '必填项不能为空' ),
            2000 )
          this.$emit( 'submit', this.model )
        } catch ( e ) {
          console.log( e );
        }
      }
    }
  }
</script>

<style>
  page {
    background-color: #fff;
  }
</style>
<style lang="scss" scoped>
  .form-container {
    padding-right: 20rpx;
    padding-left: 20rpx;
  }

  .uni_forms {

    &_item {
      display: flex;
      align-items: center;
      padding-top: 10px;
      padding-bottom: 10px;
      padding-right: 10rpx;

      &_label {

        &_title {
          font-size: 26rpx;
        }

        .required {
          color: #cb2d00;
          padding-left: 6px;
          padding-right: 6px;
        }

        .empty {
          padding-left: 10px;
          padding-right: 10px;
        }
      }

      &_container {
        flex: 1;
      }
    }

    .submit_btn {
      height: 78rpx;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20rpx;
      margin-left: 30rpx;
      margin-right: 30rpx;
    }
  }
</style>